<template>
  <kk-relative class="Page W">
    <kk-text class="T1" val="Button 按钮" />
    <div class="F2" />
    <kk-text class="T2" val="基于 svg 的按钮组件，内部使用 vw 单位，动态内容与静态内容参考 text 组件" />
    <div class="F2" />
    <div class="Shows">
      <div class="Polk">
        <kk-button class="Button" val="按钮-无色" thick />
        <kk-button class="Button" val="按钮-蓝莓" color="blueberry" thick />
        <kk-button class="Button" val="按钮-抹茶" color="matcha" thick />
        <kk-button class="Button" val="按钮-蘑菇" color="mushroom" thick />
        <kk-button class="Button" val="按钮-蛋黄" color="yolk" thick />
        <kk-button class="Button" val="按钮-樱桃" color="cherry" thick />
        <div class="F2" />
        <kk-button class="Button" val="按钮-无色" />
        <kk-button class="Button" val="按钮-蓝莓" color="blueberry" />
        <kk-button class="Button" val="按钮-抹茶" color="matcha" />
        <kk-button class="Button" val="按钮-蘑菇" color="mushroom" />
        <kk-button class="Button" val="按钮-蛋黄" color="yolk" />
        <kk-button class="Button" val="按钮-樱桃" color="cherry" />
        <div class="F2" />
        <kk-button class="Button" val="按钮-无色" thick radiu />
        <kk-button class="Button" val="按钮-蓝莓" color="blueberry" thick radiu />
        <kk-button class="Button" val="按钮-抹茶" color="matcha" thick radiu />
        <kk-button class="Button" val="按钮-蘑菇" color="mushroom" thick radiu />
        <kk-button class="Button" val="按钮-蛋黄" color="yolk" thick radiu />
        <kk-button class="Button" val="按钮-樱桃" color="cherry" thick radiu />
      </div>
      <div class="Codea">
        <kk-text class="Black" val="&lt;" />
        <kk-text class="Blues" val="kk-button" />
        <kk-text class="Blue Space" val="thick" />
        <kk-text class="Black" val="&gt; 按钮-无色 &lt;/" />
        <kk-text class="Blues" val="kk-button" />
        <kk-text class="Black" val="&gt;" />
        <div class="F2" />
        <kk-text class="Black" val="&lt;" />
        <kk-text class="Blues" val="kk-button" />
        <kk-text class="Blue Space" val="color" />
        <kk-text class="Black" val="=" />
        <kk-text class="Orange" val="blueberry" />
        <kk-text class="Blue Space" val="thick" />
        <kk-text class="Black" val="&gt; 按钮-蓝莓 &lt;/" />
        <kk-text class="Blues" val="kk-button" />
        <kk-text class="Black" val="&gt;" />
        <div class="F2" />
        <kk-text class="Black" val="&lt;" />
        <kk-text class="Blues" val="kk-button" />
        <kk-text class="Blue Space" val="color" />
        <kk-text class="Black" val="=" />
        <kk-text class="Orange" val="matcha" />
        <kk-text class="Blue Space" val="thick" />
        <kk-text class="Black" val="&gt; 按钮-抹茶 &lt;/" />
        <kk-text class="Blues" val="kk-button" />
        <kk-text class="Black" val="&gt;" />
        <div class="F2" />
        <kk-text class="Black" val="&lt;" />
        <kk-text class="Blues" val="kk-button" />
        <kk-text class="Blue Space" val="color" />
        <kk-text class="Black" val="=" />
        <kk-text class="Orange" val="mushroom" />
        <kk-text class="Blue Space" val="thick" />
        <kk-text class="Black" val="&gt; 按钮-蘑菇 &lt;/" />
        <kk-text class="Blues" val="kk-button" />
        <kk-text class="Black" val="&gt;" />
        <div class="F2" />
        <kk-text class="Black" val="&lt;" />
        <kk-text class="Blues" val="kk-button" />
        <kk-text class="Blue Space" val="color" />
        <kk-text class="Black" val="=" />
        <kk-text class="Orange" val="yolk" />
        <kk-text class="Blue Space" val="thick" />
        <kk-text class="Black" val="&gt; 按钮-蛋黄 &lt;/" />
        <kk-text class="Blues" val="kk-button" />
        <kk-text class="Black" val="&gt;" />
        <div class="F2" />
        <kk-text class="Black" val="&lt;" />
        <kk-text class="Blues" val="kk-button" />
        <kk-text class="Blue Space" val="color" />
        <kk-text class="Black" val="=" />
        <kk-text class="Orange" val="cherry" />
        <kk-text class="Blue Space" val="thick" />
        <kk-text class="Black" val="&gt; 按钮-樱桃 &lt;/" />
        <kk-text class="Blues" val="kk-button" />
        <kk-text class="Black" val="&gt;" />
        <div class="F2" />
        <div class="F2" />
        <kk-text class="Black" val="&lt;" />
        <kk-text class="Blues" val="kk-button" />
        <kk-text class="Blue Space" val="val" />
        <kk-text class="Black" val="=" />
        <kk-text class="Orange">"按钮-无色"</kk-text>
        <kk-text class="Black Space" val="/&gt;" />
        <div class="F2" />
        <kk-text class="Black" val="&lt;" />
        <kk-text class="Blues" val="kk-button" />
        <kk-text class="Blue Space" val="color" />
        <kk-text class="Black" val="=" />
        <kk-text class="Orange" val="blueberry" />
        <kk-text class="Blue Space" val="val" />
        <kk-text class="Black" val="=" />
        <kk-text class="Orange">"按钮-蓝莓"</kk-text>
        <kk-text class="Black Space" val="/&gt;" />
        <div class="F2" />
        <kk-text class="Black" val="&lt;" />
        <kk-text class="Blues" val="kk-button" />
        <kk-text class="Blue Space" val="color" />
        <kk-text class="Black" val="=" />
        <kk-text class="Orange" val="matcha" />
        <kk-text class="Blue Space" val="val" />
        <kk-text class="Black" val="=" />
        <kk-text class="Orange">"按钮-抹茶"</kk-text>
        <kk-text class="Black Space" val="/&gt;" />
        <div class="F2" />
        <kk-text class="Black" val="&lt;" />
        <kk-text class="Blues" val="kk-button" />
        <kk-text class="Blue Space" val="color" />
        <kk-text class="Black" val="=" />
        <kk-text class="Orange" val="mushroom" />
        <kk-text class="Blue Space" val="val" />
        <kk-text class="Black" val="=" />
        <kk-text class="Orange">"按钮-蘑菇"</kk-text>
        <kk-text class="Black Space" val="/&gt;" />
        <div class="F2" />
        <kk-text class="Black" val="&lt;" />
        <kk-text class="Blues" val="kk-button" />
        <kk-text class="Blue Space" val="color" />
        <kk-text class="Black" val="=" />
        <kk-text class="Orange" val="yolk" />
        <kk-text class="Blue Space" val="val" />
        <kk-text class="Black" val="=" />
        <kk-text class="Orange">"按钮-蛋黄"</kk-text>
        <kk-text class="Black Space" val="/&gt;" />
        <div class="F2" />
        <kk-text class="Black" val="&lt;" />
        <kk-text class="Blues" val="kk-button" />
        <kk-text class="Blue Space" val="color" />
        <kk-text class="Black" val="=" />
        <kk-text class="Orange" val="cherry" />
        <kk-text class="Blue Space" val="val" />
        <kk-text class="Black" val="=" />
        <kk-text class="Orange">"按钮-樱桃"</kk-text>
        <kk-text class="Black Space" val="/&gt;" />
        <div class="F2" />
        <div class="F2" />
        <kk-text class="Black" val="&lt;" />
        <kk-text class="Blues" val="kk-button" />
        <kk-text class="Blue Space" val="val" />
        <kk-text class="Black" val="=" />
        <kk-text class="Orange">"按钮-无色"</kk-text>
        <kk-text class="Blue Space" val="thick" />
        <kk-text class="Blue Space" val="radiu" />
        <kk-text class="Black Space" val="/&gt;" />
        <div class="F2" />
        <kk-text class="Black" val="&lt;" />
        <kk-text class="Blues" val="kk-button" />
        <kk-text class="Blue Space" val="color" />
        <kk-text class="Black" val="=" />
        <kk-text class="Orange" val="blueberry" />
        <kk-text class="Blue Space" val="val" />
        <kk-text class="Black" val="=" />
        <kk-text class="Orange">"按钮-蓝莓"</kk-text>
        <kk-text class="Blue Space" val="thick" />
        <kk-text class="Blue Space" val="radiu" />
        <kk-text class="Black Space" val="/&gt;" />
        <div class="F2" />
        <kk-text class="Black" val="&lt;" />
        <kk-text class="Blues" val="kk-button" />
        <kk-text class="Blue Space" val="color" />
        <kk-text class="Black" val="=" />
        <kk-text class="Orange" val="matcha" />
        <kk-text class="Blue Space" val="val" />
        <kk-text class="Black" val="=" />
        <kk-text class="Orange">"按钮-抹茶"</kk-text>
        <kk-text class="Blue Space" val="thick" />
        <kk-text class="Blue Space" val="radiu" />
        <kk-text class="Black Space" val="/&gt;" />
        <div class="F2" />
        <kk-text class="Black" val="&lt;" />
        <kk-text class="Blues" val="kk-button" />
        <kk-text class="Blue Space" val="color" />
        <kk-text class="Black" val="=" />
        <kk-text class="Orange" val="mushroom" />
        <kk-text class="Blue Space" val="val" />
        <kk-text class="Black" val="=" />
        <kk-text class="Orange">"按钮-蘑菇"</kk-text>
        <kk-text class="Blue Space" val="thick" />
        <kk-text class="Blue Space" val="radiu" />
        <kk-text class="Black Space" val="/&gt;" />
        <div class="F2" />
        <kk-text class="Black" val="&lt;" />
        <kk-text class="Blues" val="kk-button" />
        <kk-text class="Blue Space" val="color" />
        <kk-text class="Black" val="=" />
        <kk-text class="Orange" val="yolk" />
        <kk-text class="Blue Space" val="val" />
        <kk-text class="Black" val="=" />
        <kk-text class="Orange">"按钮-蛋黄"</kk-text>
        <kk-text class="Blue Space" val="thick" />
        <kk-text class="Blue Space" val="radiu" />
        <kk-text class="Black Space" val="/&gt;" />
        <div class="F2" />
        <kk-text class="Black" val="&lt;" />
        <kk-text class="Blues" val="kk-button" />
        <kk-text class="Blue Space" val="color" />
        <kk-text class="Black" val="=" />
        <kk-text class="Orange" val="cherry" />
        <kk-text class="Blue Space" val="val" />
        <kk-text class="Black" val="=" />
        <kk-text class="Orange">"按钮-樱桃"</kk-text>
        <kk-text class="Blue Space" val="thick" />
        <kk-text class="Blue Space" val="radiu" />
        <kk-text class="Black Space" val="/&gt;" />
      </div>
    </div>

    <div class="F1" />

    <kk-text class="T1" val="点击事件与禁用" />
    <div class="F2" />
    <kk-text class="T2" val="点击事件和原有的 button 元素相同，禁用需添加 no 属性" />
    <div class="F2" />
    <div class="Shows">
      <div class="Polk">
        <kk-button class="Button" val="按钮-无色" @click="Test()" thick />
        <kk-button class="Button" val="按钮-蓝莓" color="blueberry" thick no />
        <kk-button class="Button" val="按钮-抹茶" color="matcha" thick />
      </div>
      <div class="Codea">
        <kk-text class="Black" val="&lt;" />
        <kk-text class="Blues" val="kk-button" />
        <kk-text class="Blue Space" val="@click=" />
        <kk-text class="Orange">"alert('点击测试')"</kk-text>
        <kk-text class="Blue Space" val="thick" />
        <kk-text class="Black" val="&gt; 按钮-无色 &lt;/" />
        <kk-text class="Blues" val="kk-button" />
        <kk-text class="Black" val="&gt;" />
        <div class="F2" />
        <kk-text class="Black" val="&lt;" />
        <kk-text class="Blues" val="kk-button" />
        <kk-text class="Blue Space" val="thick" />
        <kk-text class="Blue Space" val="no" />
        <kk-text class="Black" val="&gt; 按钮-无色 &lt;/" />
        <kk-text class="Blues" val="kk-button" />
        <kk-text class="Black" val="&gt;" />
        <div class="F2" />
        <kk-text class="Black" val="&lt;" />
        <kk-text class="Blues" val="kk-button" />
        <kk-text class="Blue Space" val="thick" />
        <kk-text class="Blue Space" val="no=" />
        <kk-text class="Orange">"false"</kk-text>
        <kk-text class="Black" val="&gt; 按钮-无色 &lt;/" />
        <kk-text class="Blues" val="kk-button" />
        <kk-text class="Black" val="&gt;" />
      </div>
    </div>

    <div class="F1" />

    <kk-text class="T1" val="宽度与字号" />
    <div class="F2" />
    <kk-text class="T2" val="组件宽度由内容撑开，字号通过 js 计算，为组件高度的一半" />

    <div class="F1" />

    <kk-text class="T1" val="可覆盖样式" />
    <div class="F2" />
    <kk-text class="T2" val="组件默认的样式" />
    <div class="F2" />
    <div class="Shows">
      <div class="Codea">
        <kk-text class="Blues" val="border-width:" />
        <kk-text class="Greens Space" val="0.05vw" />
        <div class="F2" />
        <kk-text class="Blues" val="display:" />
        <kk-text class="Orange Space" val="inline-block" />
        <div class="F2" />
        <kk-text class="Blues" val="border-style:" />
        <kk-text class="Orange Space" val="solid" />
        <div class="F2" />
        <kk-text class="Blues" val="text-align:" />
        <kk-text class="Orange Space" val="center" />
        <div class="F2" />
        <kk-text class="Blues" val="overflow:" />
        <kk-text class="Orange Space" val="hidden" />
        <div class="F2" />
        <kk-text class="Blues" val="height:" />
        <kk-text class="Greens Space" val="1.4vw" />
      </div>
    </div>

    <div class="F1" />

    <kk-text class="T1" val="行内样式" />
    <div class="F2" />
    <kk-text class="T2" val="行内样式由 js 动态添加，涉及 fill border-radius border-color background-color" />
    <div class="F2" />
    <kk-text class="T2" val="静态行内样式" />
    <div class="F2" />
    <div class="Shows">
      <div class="Codea">
        <kk-text class="Blues" val="overflow:" />
        <kk-text class="Orange Space" val="hidden" />
        <div class="F2" />
        <kk-text class="Blues" val="position:" />
        <kk-text class="Orange Space" val="relative" />
      </div>
    </div>
  </kk-relative>
</template>

<script>
export default {
  // 页面方法
  methods: {
    Test() {
      window.alert("点击测试");
    }
  }
};
</script>

<style scoped>
.Button {
  margin-right: 0.7vw;
  height: 1.7vw;
}
</style>